import { FC } from "react";
import {
  QuestionParagraphDefaultProps,
  QuestionParagraphPropsType,
} from "./interface";
import { Typography } from "antd";
import { cn } from "@/utils/core-uitls";

const { Paragraph } = Typography;

export const QuestionParagraph: FC<QuestionParagraphPropsType> = (
  props: QuestionParagraphPropsType
) => {
  const { text = "", isCenter = false } = {
    ...QuestionParagraphDefaultProps,
    ...props,
  };

  const tr = text.split("\n");

  return (
    <Paragraph className={cn(isCenter ? "text-center" : "")}>
      {tr.map((c, index) => (
        <span key={index}>
          {index > 0 && <br />}
          {c}
        </span>
      ))}
    </Paragraph>
  );
};

export default QuestionParagraph;
